<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-double-info-widget" :style="getStyle('head')">
      <div class="widget-inside">
        <!--医生排班业务-->
        <div class="doc-scheduling-info">
          <template v-for="(item,index) in getRoomDoctorInfo">
            <div class="doctor-describe" :key="index">
              <div class="left">
                <img :src="getDoctorPicture(item?.workerInfo)" alt="医生">
              </div>
              <div class="right" :key="widgetKey">
                <!--医生相关信息-->
                <div class="doc-desc-info">
                  <div class="title">
                    <div class="name">
                      <ScrollX> {{ item?.workerInfo?.workerName || '\u00a0' }}</ScrollX>
                      <!-- {{ item?.workerInfo?.workerName || '\u00a0' }} -->
                    </div>
                    <div class="academic—title" v-if="item?.workerInfo?.workerTitle">
                      <ScrollX>{{ item?.workerInfo?.workerTitle || "\u00a0" }}</ScrollX>
                      <!-- {{ item?.workerInfo?.workerTitle || "\u00a0" }} -->
                    </div>
                  </div>
                  <div class="desc">
                    <ScrollY :content="item?.workerInfo?.workerIntro || '\u00a0'" :pageDuration="10"/>
                  </div>
                </div>
                <!--排版的界面-->
                <div class="scheduling">
                  <div class="scheduling-inside">
                    <div class="header">
                      <div
                          class="item"
                          v-for="(item, index) in TitleWeekInfo"
                          :key="index"
                      >
                        {{ item.label }}
                      </div>
                    </div>
                    <div
                        class="content"
                        v-for="(RowItem, RowIndex) in (item.scheduleList) || scheduleList"
                        :key="RowIndex"
                    >
                      <div
                          :class="index== '0'?'itemPlus' :'item' "
                          v-for="(item, index) in TitleWeekInfo"
                          :key="index"
                      >
                        <template v-if="index=== 0">
                          {{ RowItem.noonName }}
                        </template>
                        <template v-else-if="RowItem[item.status].status">
                          √
                        </template>
                        <template v-else></template>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {buildParentApi} from "@/utils/designer/util";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import vueSeamlessScroll from 'vue-seamless-scroll';
import {v4 as uuid} from "uuid";

let buildParent = buildParentApi();

export default {
  name: "scene-picture-doctor-schedule-1080-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    ScrollY,
    vueSeamlessScroll,
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      TitleWeekInfo: [
        {label: "排班", value: 0, status: "farewell"},
        {label: "周一", value: 1, status: "weekMon"},
        {label: "周二", value: 2, status: "weekTue"},
        {label: "周三", value: 3, status: "weekWed"},
        {label: "周四", value: 4, status: "weekThur"},
        {label: "周五", value: 5, status: "weekFri"},
        {label: "周六", value: 6, status: "weekSat"},
        {label: "周日", value: 7, status: "weekSun"},
      ],
      scheduleList: [
        {
          "noonId": "1",
          "noonName": "上午",
          "weekMon": {
            "status": false,
            "week": 0
          },
          "weekTue": {
            "status": false,
            "week": 1
          },
          "weekWed": {
            "status": false,
            "week": 2
          },
          "weekThur": {
            "status": false,
            "week": 3
          },
          "weekFri": {
            "status": false,
            "week": 4
          },
          "weekSat": {
            "status": false,
            "week": 5
          },
          "weekSun": {
            "status": false,
            "week": 6
          }
        },
        {
          "noonId": "2",
          "noonName": "下午",
          "weekMon": {
            "status": false,
            "week": 0
          },
          "weekTue": {
            "status": false,
            "week": 1
          },
          "weekWed": {
            "status": false,
            "week": 2
          },
          "weekThur": {
            "status": false,
            "week": 3
          },
          "weekFri": {
            "status": false,
            "week": 4
          },
          "weekSat": {
            "status": false,
            "week": 5
          },
          "weekSun": {
            "status": false,
            "week": 6
          }
        },
        {
          "noonId": "3",
          "noonName": "晚班",
          "weekMon": {
            "status": false,
            "week": 0
          },
          "weekTue": {
            "status": false,
            "week": 1
          },
          "weekWed": {
            "status": false,
            "week": 2
          },
          "weekThur": {
            "status": false,
            "week": 3
          },
          "weekFri": {
            "status": false,
            "week": 4
          },
          "weekSat": {
            "status": false,
            "week": 5
          },
          "weekSun": {
            "status": false,
            "week": 6
          }
        }
      ],
    }
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        console.log(info.headHeight)
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(info.headHeight));
            Reflect.set(Obj, 'backgroundColor', `${(info.backgroundColor)}`);
            return Obj;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(info.imageHeight));
            Reflect.set(Obj, 'width', pxToVw(info.imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(info.imageRadius));
            return Obj;
        }
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let listInfo = Array();
      let roomDoctorInfo = this.$store.getters['getDoctorSchedulingInfo'];
      if (devType) {
        listInfo = roomDoctorInfo.apiData
      } else {
        listInfo = roomDoctorInfo.mockData
      }
      listInfo = listInfo.map(item=>{
        if(item.scheduleList.length > 6){
           item.scheduleList =  item.scheduleList.slice(0, 6)
        }
        return item
      })
      if (!!(listInfo?.length)) {
        if ((listInfo.length) >= 4) {
          return listInfo.slice(0, 4);
        } else {
          let arr = (new Array(4 - listInfo.length).fill({}));
          return [...listInfo, ...arr];
        }
      } else {
        return new Array(4).fill({})
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        // let isPause = row?.isPause;
        let header = "/tpleditor/resource/assets/images/header.png";
        return row?.workerPicture || header;
      };
    },

  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "publishListInfo":
          this.widgetKey = uuid();
          let publicListInfo = this.$lodash.cloneDeep(data);
          await this.$store.dispatch('setDoctorSchedulingInfo', publicListInfo)
          break
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.widgetKey = uuid();
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-DRC-double-info-widget {
  padding: 28px 30px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;

  .widget-inside {
    height: calc(100%);
    border-radius: 42px 0px 16px 16px;
    overflow: hidden;
    //科室隐藏
    .dept-room-hide {
      display: flex;

      p {
        width: 100%;
        align-self: center;
      }
    }

    .doc-scheduling-info {
      font-size: 42px;
      // display: flex;
      // flex-direction: column;
      // margin-top: 24px;
      .Itembottom {
        margin-bottom: 20px;
      }

      .doctor-describe {
        display: flex;
        width: 1021px;
        height: 380px;
        margin-bottom: 30px;
        //图片视图
        .left {
          width: 280px;
          height: 380px;
          overflow: hidden;
          margin-right: 18px;
          box-sizing: border-box;
          display: flex;
          flex-shrink: 0;
          border-radius: 16px;
          border: 1px #cccccc solid;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        //文字视图
        .right {
          // width: calc(100% - 320px);
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 380px;
          .doc-desc-info {
            // display: flex;
            overflow: hidden;
            // min-height: 220px;
            width: 720px;
            .title {
              // width: 250px;
              // height: 70px;
              display: flex;
              align-items: center;
              // justify-content: center;
              // align-self: start;
              // margin-right: 14px;
              box-sizing: border-box;

              .name {
                font-size: 50px;
                font-weight: bolder;
                max-width: 400px;
                // line-height: 108px;
                margin-right: 30px;
                :deep(.st-inner){
                  margin: inherit;
                }
              }

              .academic—title {
                max-width: 400px;
                font-size: 30px;
                // line-height: 50px;
                // height: 50px;
                text-align: left;
                background: #0059B3;
                color: #fff;
                padding: 4px 14px;
                border-radius: 5px;
              }
            }

            .desc {
              font-size: 32px;
              // height: 200px;
              height: 113px;
              margin-top: 21px;
              // width: calc(100% - 266px);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 5;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
              -webkit-box-orient: vertical;
            }
          }

          .scheduling {
            width: 100%;
            // height: 181px;
            margin-top: 9px;
            align-items: end;
            align-self: flex-end;

            .scheduling-inside {
              width: 99%;

              .header {
                display: flex;
                height: 46px;
                line-height: 46px;
                padding: 0;

                .item {
                  flex: 1;
                  font-size: 18px;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  border-radius: 8px 8px 0 0;
                }
              }

              .content {
                display: flex;
                height: 46px;
                line-height: 46px;
                .itemPlus{
                  flex: 1;
                  font-size: 18px;
                  background: white;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  border-radius: 8px 0 0  8px;
                }
                .item {
                  flex: 1;
                  font-size: 18px;
                  background: white;
                  text-align: center;
                  justify-content: center;
                  border: 1px #babbbd solid;
                  // border-radius: 0 0 8px 8px;

                  &:first-child {
                    background: #f4f4f4;
                  }
                }
              }
            }
          }
        }
      }
    }


  }
}
</style>